import React, {Component} from 'react';
import Home from "./home/Home";
import Me from "./me/Me";
import Item from "./item";

class Day02 extends Component {
  //es7的写法
  //类似vue中 data的写法
  state = {
    show: true,
    userList: ['许佳琪', '金子涵', '喻言', '戴萌', '左卓']
  };

  render() {
    window.h = this;
    return <div>
      <button onClick={() => {
        // this.state.show = !this.state.show
        this.setState({
          show: true,
          userList: ['许佳琪', '金子涵', '喻言', '戴萌', '左卓', '虞书欣', '赵小棠']
        },()=>{
          console.log(this.state.userList);
        });
        //打印什么?改变后的 还是改变前的
        // console.log(this.state.userList);

      }}>Home
      </button>
      <button onClick={() => {
        // this.state.show = !this.state.show
        this.setState({
          show: false,
          userList: ['许佳琪', '金子涵', '喻言', '戴萌', '左卓']
        })
      }}>Me
      </button>

      <div>
        {/*因为react中没有v-if  所以只能使用三目运算符模拟*/}
        {this.state.show && <Home/>}
      </div>
      <div>
        {!this.state.show && <Me/>}
      </div>

      <ul>
        {this.state.userList.map(item => <li key={item}>
          {item}
        </li>)}
      </ul>

      <Item/>
      <Item/>
    </div>;
  }

}

export default Day02;
